<template>
    <div class="knowledge-layout">
        <header class="header-container">
            <span class="header-title">知识库管理</span>
            <div class="header-actions">
                <a-input-search
                    v-model:value="searchQuery"
                    placeholder="请输入知识库名称"
                    class="search-input"
                    allow-clear
                    @search="fetchKnowledgeList(searchQuery)"
                />
                <a-button @click="openCreateKnowledgeModal" type="primary">
                    新增知识库
                </a-button>
            </div>
        </header>
        <directory-card
            @handleEdit="openEditKnowledgeModal"
            :tabContent="knowledgeList"
            @init="() => fetchKnowledgeList()"
        ></directory-card>
        <create-knowledge
            :open="visible"
            :title="knowledgeTitle"
            :form-data="formData"
            @cancel="closeCreateKnowledgeModal"
            @submit="() => fetchKnowledgeList()"
        >
        </create-knowledge>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import directoryCard from './knowledge-directory/directory-card.vue';
import createKnowledge from './knowledge-directory/create-knowledge.vue';
import KnowledgeBaseManage from "@/common/api/knowledge/knowledgeBaseManage";

// 搜索相关
const searchQuery = ref('');
const knowledgeList = ref([])


// 弹窗相关
const visible = ref(false);
const knowledgeTitle = ref('新增知识库');
const formData = ref({
    name: '',
    describe: '',
    permission: 'only_me',
    shareStatus: 0,
    publish: false
});

// 数据获取
const fetchKnowledgeList = async (queryVal = "") => {
    const result = await KnowledgeBaseManage.getKnowledgeBaseList(queryVal);
    if(result) {
        knowledgeList.value = result.data;
    }
}

// 弹窗操作
const openCreateKnowledgeModal = () => {
    formData.value = {
        name: '',
        describe: '',
        permission: 'only_me',
        shareStatus: 0,
        publish: false
    };
    knowledgeTitle.value = '新增知识库';
    visible.value = true;
};

const openEditKnowledgeModal = (knowledgeInfo) => {
    visible.value = true;
    knowledgeTitle.value = '编辑知识库';
    formData.value = knowledgeInfo;
};

const closeCreateKnowledgeModal = () => {
    visible.value = false;
};

onMounted(async () => {
    await fetchKnowledgeList();
})
</script>

<style scoped lang="scss">
.knowledge-layout {
    width: 100%;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.header-title {
    font-size: 24px;
    font-weight: 600;
    color: #495057;
}

.header-actions {
    display: flex;
    align-items: center;
}

.search-input {
    margin-right: 16px;
    color: #495057;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

</style>
